<template>
	<view>
		<login></login>
		<view class="header">
			<view class="headerPic">
				<image :src="pic" mode="" style="width: 150rpx;
	height: 150rpx;
	border-radius: 50%;"></image>
			</view>
			<view class="headerName">
				<h1>{{name}}</h1>
				<p>普通用户</p>
			</view>
		</view>
		<view class="main">
			<view class="mainin">
				<h1>服务大厅</h1>
				<div class="font">
				    <div class="item">
						<div style="padding-left: 55rpx;"><img src="../../static/me_icons/会员中心.png" style="width: 80rpx;height: 80rpx;"></div>
						<div style="padding-left: 40rpx;padding-top: 15rpx;">会员中心</div>
				    </div>
				    <div class="item">
				        <div style="padding-left: 15rpx;"><img src="../../static/me_icons/积分商城.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-top: 15rpx;">积分商城</div>
				    </div>
				    <div class="item">
				        <div style="padding-left: 20rpx;"><img src="../../static/me_icons/关注商家.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-right: 40rpx;padding-top: 15rpx;">关注商家</div>
				    </div>
				</div>
				<div class="font">
				    <div class="item">
						<div style="padding-left: 55rpx;"><img src="../../static/me_icons/拼团.png" style="width: 80rpx;height: 80rpx;"></div>
						<div style="padding-left: 40rpx;padding-top: 15rpx;">我的拼团</div>
				    </div>
				    <div class="item">
				        <div style="padding-left: 15rpx;"><img src="../../static/me_icons/我的收藏.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-top: 15rpx;">我的收藏</div>
				    </div>
				    <div class="item">
				        <div style="padding-left: 20rpx;"><img src="../../static/me_icons/用户反馈.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-right: 40rpx;padding-top: 15rpx;">用户反馈</div>
				    </div>
				</div>
				<div class="font">
				    <div class="item">
						<div style="padding-left: 55rpx;"><img src="../../static/me_icons/常见问题.png" style="width: 80rpx;height: 80rpx;"></div>
						<div style="padding-left: 40rpx;padding-top: 15rpx;">常见问题</div>
				    </div>
					<navigator url="../../subpages/online/online">
				    <div class="item">
				        <div style="padding-left: 15rpx;"><img src="../../static/me_icons/在线客服@3x.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-top: 15rpx;">在线客服</div>
				    </div>
					</navigator>
					<navigator url="../../subpages/setup/setup">
				    <div class="item">
				        <div style="padding-left: 20rpx;"><img src="../../static/me_icons/设置.png" style="width: 80rpx;height: 80rpx;"></div>
				        <div style="padding-right: 40rpx;padding-top: 15rpx;">应用设置</div>
				    </div>
					</navigator>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	const DB = wx.cloud.database();
	export default {
		
		created() {
			uni.$on('getId', (id) => {
				this.id = id
				console.log("id4", this.id)
				this.getUser()
			})
			
		},
		data() {
			return {
				id:'',
				pic:'',
				name:''
			}
		},
		methods: {
			getUser(){
				DB.collection('userList1').doc(this.id)
					.get({
						success: (res) => {
							console.log(res.data, "查询ddd成功")
							this.pic = res.data.headPic
							this.name = res.data.userName
						},
						fail: (res) => {
							console.log("查询ddd失败")
						}
					})
			}
		}
	}
</script>

<style>
*{
	margin: 0;
	padding: 0;
}
.clears{
	clear: both;
	height: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
.header{
	width: 100%;
	height: 300rpx;
	background-color: #E7C722;
	display: flex;
}
.headerPic{
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	background: white;
	margin-top: 40rpx;
	margin-left: 60rpx;
}
.headerName{
	padding-left: 20rpx;
	padding-top: 50rpx;
}
.headerName>h1{
	font-size: 40rpx;
}
.headerName>p{
	padding-top: 20rpx;
}
.main{
	width: 100%;
	height: 800rpx;
	background-color: whitesmoke;
}
.mainin{
	width: 90%;
	height: 100%;
	margin: auto;
	background-color: white;
}
.mainin>h1{
	padding-top: 40rpx;
	padding-left: 40rpx;
	font-size: 30rpx;
	font-weight: 600;
}
.font{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	padding-bottom: 15px;
}
</style>
